<script lang="ts" setup>
defineOptions({
  name: "VidBd"
});
const props = defineProps({
  innerStyle: {
    type: [Object],
    default: () => ({})
  },
  index: {
    type: [Number, String]
  },
  videoJsOptions: {
    type: [Object],
    default: () => ({})
  },
  item: {
    type: [Object],
    default: () => ({})
  }
});
import style from "./index.module.less";
import { getSvg } from "@/utils";
const emit = defineEmits([
  "update:innerStyle",
  "update:index",
  "update:videoJsOptions",
  "update:item",
  "handleClickAction",
  "handlePlayEnded",
  "handleCollect",
  "ready",
  "toggleSound"
]);
const innerStyle = useRefModel(props, "innerStyle", emit);
const index = useRefModel(props, "index", emit);
const videoJsOptions = useRefModel(props, "videoJsOptions", emit);
const item = useRefModel(props, "item", emit);
function handleToggleSound() {
  emit("toggleSound", index.value);
}
const youtubeOptions = computed(() => ({
  youtubeId: item.value.youtubeId
}));
</script>
<template>
  <div :class="style['video-index']">
    <div class="video-wrap h-full">
      <div :style="innerStyle">
        <Video
          @ended="() => emit('handlePlayEnded', index)"
          @ready="(player: any) => emit('ready', player)"
          :options="youtubeOptions"
        />
      </div>
      <div class="sound" @click.stop="handleToggleSound">
        <img
          :src="getSvg(videoJsOptions.muted ? 'Mute(1)' : 'sound(1)')"
          alt=""
        />
      </div>
      <div class="collect" @click.stop="() => emit('handleCollect', index)">
        <img :src="getSvg(item.isCollect ? 'like1' : 'like2')" alt="" />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
:deep(.van-text-ellipsis__action) {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  float: right;
}
:deep(.ytp-pause-overlay) {
  display: none !important;
}
</style>
